<template>
    <el-menu background-color="#000C34" text-color="#4bc3ec" :default-active="selectedTab" mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
        {{ item.label }}
      </el-menu-item>
    </el-menu>
  </template>
  
  <script>
  export default {
    name: 'CommonNavbar',
    props: {
      selectedTab: {
        type: String,
        required: true
      },
      menuItems: {
        type: Array,
        required: true,
        default: () => []
      }
    },
    methods: {
      handleSelect(key) {
        this.$emit('select', key);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 导航栏样式 */
  .el-menu {
    background-color: #000C34 !important;
  }
  .el-menu-item.is-active {
    color: #3A7FF0 !important;
    border-bottom: 2px solid #3A7FF0;
  }
  </style>